<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试websokcet</title>
</head>
<body>
    <input type="text" id="input">
    <button id="send-button">点击发送</button>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        //websocket js有提供实现类,可以直接用
        let webSocketMessage = new WebSocket("ws://127.0.0.1:8080/TestWebSocketMessage");
        //这里是类对象,使用原生js来绑定属性
        webSocketMessage.onopen=function(){
            console.log("websocket 建立连接成功");
        }
        webSocketMessage.onmessage=function(e){

            console.log("websocket 收到消息:"+e.data);
            
        }
        webSocketMessage.onclose=function(){
            console.log("websocket 关闭连接");
        }
        webSocketMessage.onerror=function(){
            console.log("websocket 连接异常");
        }
        let button = $("#send-button");
        let input = $("#input");
        button.on('click',function(){
            let message=input.val();
            console.log("websocket发送消息: "+message);
            webSocketMessage.send(message);
        })
    </script>
</body>
</html>